import React from 'react';
import { Layout, Menu, Button, Dropdown, Avatar, Space } from 'antd';
import type { MenuProps } from 'antd';
import { Link, useNavigate, useLocation } from 'react-router-dom';
import {
  UserOutlined,
  ShoppingCartOutlined,
  LogoutOutlined,
  SettingOutlined,
} from '@ant-design/icons';
import useAuth from '@/hooks/useAuth';
import { useAppDispatch } from '@/store/hooks';
import { logout } from '@/store/slices/authSlice';
import { clearAuthStorage } from '@/utils/auth';
import Logo from '@/components/Logo';
import styles from './styles.module.less';

const { Header: AntHeader } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

const Header: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const dispatch = useAppDispatch();
  const { isLoggedIn, userInfo, isAdmin } = useAuth();

  const handleLogout = () => {
    dispatch(logout());
    clearAuthStorage();
    navigate('/auth/login');
  };

  const userMenuItems: MenuItem[] = [
    {
      key: 'profile',
      label: '个人资料',
      icon: <UserOutlined />,
      onClick: () => navigate('/user/profile'),
    },
    {
      key: 'orders',
      label: '我的订单',
      icon: <ShoppingCartOutlined />,
      onClick: () => navigate('/user/order/list'),
    },
    ...(isAdmin() ? [{
      key: 'admin',
      label: '管理后台',
      icon: <SettingOutlined />,
      onClick: () => navigate('/admin/dashboard'),
    }] : []),
    {
      type: 'divider',
    } as MenuItem,
    {
      key: 'logout',
      label: '退出登录',
      icon: <LogoutOutlined />,
      onClick: handleLogout,
    },
  ];

  const mainMenuItems: MenuItem[] = [
    {
      key: 'home',
      label: <Link to="/">首页</Link>,
    },
    {
      key: 'disease',
      label: <Link to="/disease/list">疾病</Link>,
    },
    {
      key: 'medicine',
      label: <Link to="/medicine/list">药品</Link>,
    },
    {
      key: 'consultation',
      label: <Link to="/ai/consultation">AI问诊</Link>,
    },
  ];

  // 获取当前激活的菜单项
  const getSelectedKey = () => {
    const path = location.pathname;
    if (path === '/') return 'home';
    return mainMenuItems.find(item => path.startsWith(`/${item?.key}`))?.key?.toString() || '';
  };

  return (
    <AntHeader className={styles.header}>
      <div className={styles.container}>
        <div className={styles.logo}>
          <Link to="/">
            <Logo />
          </Link>
        </div>

        <Menu
          mode="horizontal"
          selectedKeys={[getSelectedKey()]}
          items={mainMenuItems}
          className={styles.menu}
        />

        <div className={styles.actions}>
          {isLoggedIn ? (
            <>
              <Link to="/user/cart" className={styles.cartLink}>
                <ShoppingCartOutlined />
                <span>购物车</span>
              </Link>
              <Dropdown
                menu={{ items: userMenuItems }}
                placement="bottomRight"
                arrow
              >
                <Space className={styles.userInfo}>
                  <Avatar
                    src={userInfo?.avatar}
                    icon={<UserOutlined />}
                    size="small"
                  />
                  <span>{userInfo?.nickname || userInfo?.username}</span>
                </Space>
              </Dropdown>
            </>
          ) : (
            <Space>
              <Button type="link" onClick={() => navigate('/auth/login')}>
                登录
              </Button>
              <Button type="primary" onClick={() => navigate('/auth/register')}>
                注册
              </Button>
            </Space>
          )}
        </div>
      </div>
    </AntHeader>
  );
};

export default Header; 